<template>
    <div>
        <div class="layout-route" v-show="!detailDialog.visible">
            <div class="card card-search">
                <el-form :model="queryParams" ref="queryForm" v-show="showSearch" inline label-width="100px">
                    <el-form-item label="SPU" prop="spu">
                        <el-input v-model.trim="queryParams.spu" placeholder="请输入" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
                    </el-form-item>
                    <el-form-item label="采购单号" prop="purchase_number">
                        <el-input v-model.trim="queryParams.purchase_number" placeholder="请输入" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
                    </el-form-item>
                    <el-form-item label="运单号" prop="track_number">
                        <el-input v-model.trim="queryParams.track_number" placeholder="请输入" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
                    </el-form-item>
                    <el-form-item label="1688订单号" prop="1688_order_number">
                        <el-input v-model.trim="queryParams['1688_order_number']" placeholder="请输入" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
                    </el-form-item>
                    <el-form-item label="供货商" prop="supply_id">
                        <SelectPage
                            v-model="queryParams.supply_id"
                            placeholder="请选择供应商"
                            :url="$api.supply.getSupplyList"
                            show_field="supply_name"
                            query_field="supply_name"
                            query_field2="spu"
                            filterable
                            clearable
                            popper-class="custom-select"
                            style="width: 240px"
                        ></SelectPage>
                    </el-form-item>

                    <el-form-item label="创建时间" prop="create_time">
                        <el-date-picker v-model="queryParams.create_time" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 240px">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label=" ">
                        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>

            <div class="card">
                <el-row :gutter="10" class="mb8">
                    <!-- <el-col :span="1.5">
                        <el-button type="primary" plain icon="el-icon-plus" @click="showDetailDialog({}, 'add')">创建</el-button>
                    </el-col> -->
                    <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
                </el-row>
                <el-tabs v-model="queryParams.purchase_status" type="border-card" @tab-click="handleQuery">
                    <el-tab-pane label="全部" name="all"></el-tab-pane>
                    <el-tab-pane v-for="item in dict.purchaseStatusList" :key="item.value" :label="item.label" :name="item.value.toString()"></el-tab-pane>
                </el-tabs>
                <div class="table-wrap">
                    <el-table v-loading="loading" :data="tableData" border script>
                        <el-table-column label="采购单号" prop="purchase_number" min-width="180">
                            <template slot-scope="scope">
                                <el-link type="primary" @click="showProductListDialog(scope.row)" style="margin-right: 8px;">{{ scope.row.purchase_number }}</el-link>
                                <el-popover
                                    placement="top-center"
                                    width="200"
                                    trigger="hover"
                                    v-if="scope.row.remark"
                                    >
                                    <span :style="{color: scope.row.remark_color}">{{ scope.row.remark }}</span>
                                    <el-tag slot="reference" type="primary">备</el-tag>
                                </el-popover>
                            </template>
                        </el-table-column>
                        <el-table-column label="图片" min-width="90">
                            <template slot-scope="scope">
                                <ImageUploadImg v-model="scope.row.image_url" :readOnly="true"></ImageUploadImg>
                            </template>
                        </el-table-column>
                        <el-table-column label="spu" prop="spu" min-width="90"></el-table-column>
                        <el-table-column label="商品种类" prop="sku_nums" min-width="100"></el-table-column>
                        <el-table-column label="采购数量" prop="purchase_quantity" min-width="100"></el-table-column>
                        <el-table-column label="付款详情" prop="purchase_cost" min-width="160">
                            <template slot-scope="scope">
                                <div>货款：{{ scope.row.payment }}</div>
                                <div v-if="scope.row.discount_fee > 0">（折扣金额：{{scope.row.discount_fee }}）</div>
                                <div v-if="scope.row.freight > 0">（含运费：{{scope.row.freight }}）</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="供货商" prop="supply_name" min-width="160"></el-table-column>
                        <el-table-column label="物流" prop="track_info" min-width="260">
                            <template slot-scope="scope" v-if="scope.row.track_info.length > 0">
                                <div v-for="(item, index) in scope.row.track_info" :key="index">
                                    <el-link type="primary">{{ `${item.track_name}: ${item.track_number}` }}</el-link>
                                </div>
                                <div>
                                    <el-button type="text" icon="el-icon-edit-outline" @click="showTrackDialog(scope.row)">添加</el-button>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="状态" prop="purchase_status" min-width="120" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <template v-if="scope.row.purchase_status == 2">
                                    {{ scope.row.arrive_quantity == 0 ? '未收货' : scope.row.arrive_quantity < scope.row.purchase_quantity ? '部分收货' : '已完成' }}
                                    [{{ scope.row.arrive_quantity }} / {{ scope.row.purchase_quantity }}]
                                </template>
                                <template v-else>
                                    {{ scope.row.purchase_status | formatLabelByValueFuzzy(dict.purchaseStatusList)}}
                                </template>
                            </template>
                        </el-table-column>
                            <el-table-column label="采购员" prop="operater" min-width="120"></el-table-column>
                        <el-table-column label="创建时间" prop="create_time" min-width="160"></el-table-column>
                        <el-table-column label="操作" width="120" fixed="right">
                            <template slot-scope="scope">
                                <div v-if="queryParams.purchase_status == 1"><el-button type="text" icon="el-icon-document-checked" @click="passCheck(scope.row, 'pass')">通过审核</el-button></div>
                                <div v-if="queryParams.purchase_status == 1"><el-button type="text" icon="el-icon-edit" @click="passReject(scope.row, 'reject')">驳回审核</el-button></div>
                                <div v-if="queryParams.purchase_status == 2"><el-button type="text" icon="el-icon-document-add" @click="insertPurchase(scope.row)">入库</el-button></div>
                                <div v-if="queryParams.purchase_status == 2"><el-button type="text" icon="el-icon-edit-outline" @click="changePurchase(scope.row)">采购变更</el-button></div>
                                <div v-if="queryParams.purchase_status == 2"><el-button type="text" icon="el-icon-document-remove" @click="endPurchase(scope.row, 'cancel')">取消采购单</el-button></div>
                                <div><el-button type="text" icon="el-icon-document-add" @click="addRemark(scope.row)">备注</el-button></div>
                                <div v-if="queryParams.purchase_status == 2 && scope.row.arrive_quantity && scope.row.arrive_quantity < scope.row.purchase_quantity">
                                    <el-button type="text" icon="el-icon-document-delete" @click="endPurchase(scope.row, 'end')">终止剩余到货</el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <pagination v-show="total > 0" :total="total" :page.sync="pageInfo.page" :limit.sync="pageInfo.limit" @pagination="getList"></pagination>
            </div>

            <remark-dialog v-model="remarkDialog.visible" v-if="remarkDialog.visible" :params="remarkDialog.data" @success="handleQuery"></remark-dialog>
            <product-list-dialog v-model="productDialog.visible" v-if="productDialog.visible" :params="productDialog.data"></product-list-dialog>
            <track-info-add v-model="trackDialog.visible" v-if="trackDialog.visible" :params="trackDialog.data" @success="handleQuery"></track-info-add>
        </div>
        <detail-dialog v-model="detailDialog.visible" v-if="detailDialog.visible" :params="detailDialog.data" :type="detailDialog.type" @success="handleQuery" @cancel="detailDialog.visible = false"></detail-dialog>
        <audit-dialog  v-model="auditDialog.visible" v-if="auditDialog.visible" :params="auditDialog.data" @success="handleQuery" @cancel="auditDialog.visible = false"></audit-dialog>
        <cancel-dialog v-model="cancelDialog.visible" v-if="cancelDialog.visible" :params="cancelDialog.data" :type="cancelDialog.type" @success="handleQuery" @cancel="cancelDialog.visible = false"></cancel-dialog>
    </div>
</template>

<script>
import { getPurchaseOrderList } from '@/api/purchase'
import DetailDialog from './components/DetailDialog.vue'
import RemarkDialog from './components/RemarkDialog.vue'
import ProductListDialog from './components/ProductListDialog.vue'
import TrackInfoAdd from './components/TrackInfoAdd.vue'
import AuditDialog from './components/AuditDialog.vue'
import CancelDialog from './components/CancelDialog.vue'
import { parseTime } from '@/utils/quickadmin'
export default {
    name: 'DownPurchaseList',
    components: { DetailDialog, RemarkDialog, ProductListDialog, TrackInfoAdd, AuditDialog, CancelDialog },
    data() {
        return {
            // 遮罩层
            loading: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 表格数据
            tableData: [],
            dict: {
                purchaserList: [],
                purchaseStatusList: [
                    // { label: '待提交', value: 0 },
                    { label: '待审核', value: 1 },
                    { label: '待到货', value: 2 },
                    { label: '已完成', value: 3 },
                    { label: '已取消', value: 4 },
                ],
            },
            tabList: [
                { label: '待提交审核', value: 1 },
                { label: '未通过审核', value: 2 },
            ],
            pageInfo: {
                page: 1,
                limit: 10,
            },
            // 查询参数
            queryParams: {
                purchase_status: "all",
                spu: undefined,
                operate_id: undefined,
                purchase_number: undefined,
                track_number: undefined,
                create_time: [],
            },
            detailDialog: {
                visible: false,
                data: {},
            },
            remarkDialog: {
                visible: false,
                data: {},
            },
            productDialog: {
                visible: false,
                data: {},
            },
            trackDialog: {
                visible: false,
                data: {},
            },
            auditDialog: {
                visible: false,
                data: {},
            },
            cancelDialog: {
                visible: false,
                type: '',
                data: {},
            },
        }
    },
     created() {
        this.getList()
    },
    methods: {
        showTrackDialog(row) {
            this.trackDialog.visible = true
            this.trackDialog.data = row
        },
        showDetailDialog(row, type) {
            this.detailDialog.visible = true
            this.detailDialog.data = row
            this.detailDialog.type = type
        },
        showProductListDialog(row) {
            this.productDialog.visible = true
            this.productDialog.data = row
        },
        insertPurchase(row) {            
            this.$router.push({
                path: '/Inventory/receipt/insert',
                query: {
                    purchase_number: row.purchase_number
                }
            })
        },
        changePurchase(row) {
            this.$router.push({
                path: '/purchase/change/change-detail',
                query: {
                    purchase_number: row.purchase_number,
                    type: 'edit'
                }
            })
        },
        endPurchase(row, type) {
            this.cancelDialog.visible = true
            this.cancelDialog.data = row
           this.cancelDialog.type = type
        },
        passCheck(row) {
            this.auditDialog.visible = true
            this.auditDialog.data.purchase_number = row.purchase_number
            this.auditDialog.data.type = 'pass'
        
        },
         passReject(row) {
            this.auditDialog.visible = true
            this.auditDialog.data.purchase_number = row.purchase_number
            this.auditDialog.data.type = 'reject'
           
        },
        //列表
        getList() {
            this.loading = true
            const qyparams = {
                ...this.pageInfo,
                ...this.queryParams,
            }
            if (qyparams.create_time?.length == 2) {
                qyparams.create_time = [parseTime(qyparams.create_time[0], 'y-m-d'), parseTime(qyparams.create_time[1], 'y-m-d')]
            }
            if(qyparams.purchase_status == 'all') {
                qyparams.purchase_status = undefined   
            }
            getPurchaseOrderList(qyparams)
                .then(response => {
                    this.tableData = response.data.list
                    this.total = response.data.total
                })
                .finally(() => {
                    this.loading = false
                })
        },

        // 搜索按钮操作
        handleQuery() {
            this.pageInfo.page = 1
            this.getList()
        },

        // 重置按钮操作
        resetQuery() {
            this.resetForm('queryForm')

            this.handleQuery()
        },
        addRemark(row) {
            this.remarkDialog.visible = true
            this.remarkDialog.data = row
        },
        // 删除按钮操作
        handleDelete(row) {
            this.$confirm('是否确认删除?', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(async () => {
                    await delInStores({ id: row.id })
                    this.getList()
                    this.msgSuccess('删除成功')
                })
                .catch(() => {})
        },
    },
}
</script>
<style scoped>
::v-deep .el-tabs .el-tabs__content {
    padding: 0;
    border-bottom: 0;
}
.el-tabs--border-card {
    box-shadow: none;
    border-bottom: 0;
}

::v-deep .el-tabs .el-tabs__content {
    padding: 0;
    border-bottom: 0;
}
.table-wrap {
    padding: 15px;
    border-bottom: 1px solid #dfe4ed;
    border-left: 1px solid #dfe4ed;
    border-right: 1px solid #dfe4ed;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
}
</style>
